<script lang="ts" setup name="BaseSwipeH5">
import { motion, MotionConfig } from 'motion-v'
import type { Swiper as SwiperType } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import { Autoplay, Navigation, Scrollbar } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { defineProps, onActivated, onMounted, ref, withDefaults } from 'vue'


interface Props {
  items?: any[]// 图片数组数据
  autoplay?: boolean // 是否自动播放
  delay?: number // 自动播放间隔
  loop?: boolean // 是否循环播放
}

const props = withDefaults(defineProps<Props>(), {
  autoplay: true,
  delay: 3000,
  loop: true,
  navigation: true,
})
const { VITE_CASINO_IMG_CLOUD_URL } = getEnv()
const { jumpToUrl } = useRedirect()
const swiperInstance = ref<SwiperType | null>(null)
const activeIndex = ref<number>(0)

const transitionDuration = computed(() => {
  return swiperInstance.value?.params.speed || 300
})

const onSwiperInit = (swiper: SwiperType): void => {
  swiperInstance.value = swiper
  activeIndex.value = swiper.realIndex
}

const onSlideChange = (swiper: SwiperType): void => {
  activeIndex.value = swiper.realIndex
}
const swiperOptions = computed(() => {
  return {
    loop: props.loop,
    slidesPerView: 1,
    loopAdditionalSlides: 1,
    loopPreventsSliding: true,
    speed: 300,
    modules: [Navigation, Scrollbar, Autoplay],
    autoplay: props.autoplay ? {
      delay: props.delay,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    } : false,
    scrollbar: { draggable: true }
  }
})
onMounted(() => {
})

onActivated(() => {
})
</script>

<template>
  <div class="hero-wrapper py-2">
    <Swiper @swiper="onSwiperInit" @slide-change="onSlideChange" v-model:active-index="activeIndex"
      v-bind="swiperOptions">
      <SwiperSlide v-for="(item, index) in items" :key="index">
        <BaseImage class="swiper-slide-image" @click="jumpToUrl({
          type: item.type ?? 1,
          jumpUrl: item.imgUrl ?? '',
          jumpState: item.jumpState,
          promo_info: item.promo_info,
        })"
          :url="`${VITE_CASINO_IMG_CLOUD_URL}/${item.banner_style === 3 ? item.banner_style3_background : item.backgroundUrl}`" />
      </SwiperSlide>
    </Swiper>
    <div class="custom-pagination flex h-5 w-full justify-center py-2">
      <ul class="flex gap-x-1.5">
        <li v-for="(item, i) in items" :key="i"
          class="cursor-pointer overflow-hidden rounded-full bg-bg-black-4 transition-all h-1.5 duration-500"
          style="transition-timing-function: ease;" :class="[i === activeIndex ? 'w-[2.375rem]' : 'w-1.5']">
          <MotionConfig v-if="i === activeIndex" :transition="{ duration: (delay + swiperOptions.speed) / 1000 }">
            <motion.span :initial="{ transform: 'translateX(-100%)' }" :animate="{ transform: 'translateX(0%)' }"
              class="block h-full w-full rounded-full bg-brand">
            </motion.span>
          </MotionConfig>


        </li>

      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hero-wrapper {
  container-type: inline-size;
  container-name: grid-size;

  .swiper {
    overflow: hidden;
    border-radius: 0.5rem;
  }

  .swiper-slide-image {}
}
</style>
